* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
}

.flex {
    display: flex;
    align-items: center;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

img {
    width: 100%;
}

body {
    background-color: RGBA(245, 245, 245, 1);
}

.back {
    position: absolute;
    top: .8125rem;
    left: .8125rem;
    width: .625rem;
}

.content {
    width: 18.375rem;
    position: relative;
    top: -7.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.content .date {
    position: relative;
}

.content .date img {
    position: relative;
    width: 11.125rem;
}

.content .date-box {
    position: absolute;
    padding-left: 1rem;
}

.content .continuous {
    font-size: .75rem;
    font-weight: bold;
    color: #191919;
}

.content .continuous span {
    font-size: 1.25rem;
    color: #ec1b24;
    margin: 0 .1875rem;
}

.content .TheCumulative {
    font-size: .625rem;
    font-weight: 500;
    color: #768590;
}

.content .TheCumulative span {
    font-size: .8125rem;
    color: #ec1b24;
    margin: 0 .1875rem;
}

.content .bg {
    width: 18.375rem;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 0px .625rem .625rem;
}

.content .selectTime {
    height: 2.5rem;
    font-size: .6875rem;
    font-weight: bold;
    color: #191919;
}

.content .selectTime span {
    margin: 0 .9375rem;
}

.content .selectTime img {
    width: .3125rem;
}

.content .weeks {
    padding: 0 .8125rem;
    height: 1.9rem;
    font-size: .625rem;
    font-weight: bold;
    color: #B7B7B7;
}

.content .weeks > div {
    width: 1.5625rem;
    height: 1.5625rem;
    text-align: center;
    line-height: 1.5625rem;
}

.content .day {
    padding: 0 .8125rem;
    flex-wrap: wrap;
}

.content .day > div {
    margin-right: .969rem;
    margin-top: .76125rem;
    width: 1.5625rem;
    height: 1.5625rem;
    font-size: .625rem;
    font-weight: bold;
}

.content .day > div:nth-child(7n) {
    margin-right: 0;
}

.content .color1 {
    color: #768590;
}

.content .color2 {
    font-size: .625rem;
    color: #191919;
}

.content .active {
    border-radius: 50%;
}

.content .active > div {
    width: 1.1875rem;
    text-align: center;
    line-height: 1.1875rem;
    height: 1.1875rem;
    color: #fff;
    background: #ec1b24;
    border-radius: 50%;
}

.content .btn {
    margin: 1.25rem auto;
    width: 16.8125rem;
    height: 2rem;
    font-size: .75rem;
    font-weight: 500;
    color: #FFFFFF;
    background: #ec1b24;
    border-radius: 1rem;
    text-align: center;
    line-height: 2rem;
}

.content .btn-2 {
    width: 16.8125rem;
    height: 2rem;
    background: #B7B7B7;
    margin: 1.25rem auto;
    border-radius: 1rem;
    text-align: center;
    line-height: 2rem;
    font-size: .75rem;
    font-weight: 500;
    color: #FFFFFF;
}

.modal {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: RGBA(73, 73, 73, .8);
}

.modal > div {
    width: 18.875rem;
}

.modal .bg {
    width: 100%;
    position: relative;
}

.modal .close {
    width: 1.6875rem;
    margin-top: 1rem;
}

.modal .text {
    position: absolute;
    top: 9rem;
    width: 100%;
}

.modal .integral {
    width: 100%;
    font-size: .875rem;
    font-weight: bold;
    color: #191919;
}

.modal .integral span {
    color: rgba(255, 0, 0, 1);
}

.modal .signIn {
    font-size: .6625rem;
    font-weight: 500;
    color: #888888;
    margin-top: .3125rem;
}

.modal .signIn span {
    color: rgba(255, 56, 23, 1);
}

.modal .btn-3 {
    position: absolute;
    top: 16.2rem;
    left: 50%;
    width: 7.125rem;
    border-radius: 1.5rem;
    height: 2rem;
    transform: translateX(-50%);
}